<template>
  <div ref="pieDom" style="width: 100%;height: 100%;"></div>
</template>

<script>
export default {
  data() {
    return {
      pieEcharts: '',
      pieOption: {},
      datas: [],
      hideColor: '#6f76ac',
    }
  },
  mounted() {
    this.datas = [
      {
        value: 20,
        name: '25%',
      },
      {
        value: 80,
        name: '75%',
      },
    ]

    this.pieEcharts = this.$echarts.init(this.$refs.pieDom)
    this.setPieOption()
    this.setPieEvents()
  },
  methods: {
    setPieOption() {
      this.pieOption = {
        color: ['#ff106e', this.hideColor], //环形的分段色值设置
        tooltip: {
          trigger: 'item',
          position: (point) => {
            return [point[0], point[1]]
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'], //内存 、外层
            avoidLabelOverlap: false,
            hoverAnimation: true,
            hoverOffset: 2,
            label: {
              normal: {
                show: false, //中间的标签
                position: 'center',
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold',
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold',
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            selectedOffset: 0,
            itemStyle: {
              emphasis: {},
            },
            data: this.datas,
          },
        ],
      }
      // 渲染图表
      this.pieEcharts.setOption(this.pieOption)
    },
    /**
     * 设置图表的事件
     */
    setPieEvents() {
      /**
       * 刷新时默认显示第一条
       */
      this.pieEcharts.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0,
      })
      /**
       * 鼠标移入图表时，不为第一条时就取消第一条的高亮效果
       */
      this.pieEcharts.on('mouseover', (v) => {
        if (v.dataIndex != 0) {
          this.pieEcharts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0,
          })
        }
      })
      /**
       * 鼠标图表时默认显示第一条
       */
      this.pieEcharts.on('mouseout', () => {
        this.pieEcharts.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0,
        })
      })
      // 监听窗口变化 - 只刷新最后一个图表
      window.onresize = () => {
        this.pieEcharts.resize()
      }

      // 监听窗口变化 - 多个图表同时刷新
      window.addEventListener('resize', () => {
        this.pieEcharts.resize()
      })
    },
  },
}
</script>

<style scoped></style>
